import {
  Box,
  Drawer,
  DrawerContent,
  DrawerOverlay,
  useBreakpointValue,
} from '@chakra-ui/react';

import SubContent from './SubContent';
const Sub = (props: { subIsOpen: boolean; subOnClose: () => void }) => {
  const show = useBreakpointValue({ base: true, md: false });
  return (
    <>
      <Box
        h={{ base: 'max-content', md: '100%' }}
        w={{ base: '100%', md: '250px' }}
        px="2"
        display={{ base: 'none', md: 'block' }}
        flexShrink={0}
        gridArea="sub"
        overflowY="scroll"
      >
        <SubContent />
      </Box>
      {show && (
        <Drawer
          isOpen={props.subIsOpen}
          onClose={props.subOnClose}
          placement="left"
        >
          <DrawerOverlay />
          <DrawerContent bg="base.950">
            <Box overflowY="scroll">
              <SubContent />
            </Box>
          </DrawerContent>
        </Drawer>
      )}
    </>
  );
};

export default Sub;
